<template>
	<div class="icons">
		<swiper :options="swiperOptions">
			<swiper-slide :key="index" v-for="(page, index) of pages">
	            <div :key="item.id" class="icon" v-for="item of page">
	                <div class="icon-img">
	                    <img :src="item.imgUrl" class="icon-img-content">
	                </div>
	                <p class="icon-desc">{{item.desc}}</p>
	            </div>
	        </swiper-slide>
		</swiper>
	</div>
</template>

<script>
export default{
	name: 'HomeIcons',
	props: {
		list: Array
	},
	data: function() {
		return {
			swiperOptions: {
				autoplay: false, //不要自动轮播
			},
			// iconList: [{
			// 	id: '0001',
			// 	//获取本地图片 imgUrl: require('@/assets/logo0.png'),
			// 	imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
			// 	desc: '景点门票'
			// },{
			// 	id: '0002',
			// 	imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/bd/9f7b9b2b60c1502.png',
			// 	desc: '滑雪季'
			// },{
			// 	id: '0003',
			// 	imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/75/eca3ce656c886502.png',
			// 	desc: '泡温泉'
			// },{
			// 	id: '0004',
			// 	imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/e3/67df61427c8e1302.png',
			// 	desc: '动植物园'
			// },{
			// 	id: '0005',
			// 	imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/c0/1dbc12358f094e02.png',
			// 	desc: '一日游'
			// },{
			// 	id: '0006',
			// 	imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png',
			// 	desc: '必游榜单'
			// },{
			// 	id: '0007',
			// 	imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/a40ee278d67000f2a29d2e20f6a029b3.png',
			// 	desc: '自然风光'
			// },{
			// 	id: '0008',
			// 	imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/b1/528a9e80403b8c02.png',
			// 	desc: '全部全部全部全部'
			// },{
			// 	id: '0009',
			// 	imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/e3/67df61427c8e1302.png',
			// 	desc: '文化古迹'
			// },{
			// 	id: '00010',
			// 	imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/b1/528a9e80403b8c02.png',
			// 	desc: '欢乐谷'
			// }]
		}
	},
	computed: {
		pages () {
			const pages = []
			this.list.forEach((item, index) => {
				const page = Math.floor(index/8)
				if (!pages[page]){
					pages[page] = []
				}
				pages[page].push(item)
			})
			return pages;
		}
	}
}
</script>

<style lang="stylus" scoped>
	@import '~@/assets/styles/varibles.styl'
	@import '~@/assets/styles/mixins.styl'
	.icons >>> .swiper-container{
		height: 0;
		padding-bottom: 50%; //宽高比为2
		//overflow: hidden; .swiper-container自带了此特性
	}
	// .icons{
	// 	overflow: hidden;
	// 	height: 0;
	// 	padding-bottom: 50%; //宽高比为2
	// 	// background: green;
	// }
	.icons{
		margin-top: .1rem; //5px
	}
		.icon{
			position: relative;
			overflow: hidden;
			float: left;
			width: 25%;
			padding-bottom: 25%;  //宽高都占25%
			// background: red;
		}
			.icon-img{
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: .44rem; //22px
				box-sizing: border-box;
				padding: .1rem; //5px,,default 1rem=50px
				// background: blue;
			}
				.icon-img-content{
					display: block;
					margin: 0 auto;
					height: 100%;
				}
			.icon-desc{
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				height: .44rem; //22px
				line-height: .44rem;
				text-align: center
				color: $daskTextColor;
				ellipsis()
			}
</style>